<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="description"
          content=""/>
    <script src="__PUBLIC__/view/js/jquery-1.8.3.js"></script>
    <script src="__PUBLIC__/view/js/jquery.reveal.js"></script>
    <script src="__PUBLIC__/view/js/jquery.cookie.js"></script>
    <script src="__PUBLIC__/view/js/common.js"></script>
    <!-- 引入 Bootstrap -->
    <link rel="icon" href="__PUBLIC__/view/img/favicon.ico" type="image/x-icon"/>
    <!--[if lte IE 10]>
    <script src="__PUBLIC__/view/js/requestAnimationFrame.js"></script>
    <![endif]-->
    <script src="__PUBLIC__/admin/layer/layer.js"></script>
    <script src="__PUBLIC__/admin/js/dialog.js"></script>

    <link rel="stylesheet" href="__PUBLIC__/view/css/bootstrap.min.css" >
    <link rel=stylesheet href="__PUBLIC__/view/css/reset.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/common.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/base.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/header.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/shopcart.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/footer_1.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/reveal.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/login.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/order_confirm.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/mycommon.css">
    <title></title>
</head>
<body>

<!--header部分-->
<div class="header shadow"  style="min-width: 0px">
    <div class="search-result">
    </div>
    <div class="header-left fl">
        <div class="icon fl"></div>
        <a class="weixin-dingfan fw" href="#">微信订饭</a>
        <a class="logo" href="#"></a>

        <div class="search none" style="display: none">
            <img class="search-icon" src="__PUBLIC__/view/img/icon_search.png" width="22" height="22">
            <input id="search-input" class="search-input" type="text" placeholder="" onkeypress="onKeySearch()">
            <span id="search-del" class="search-del">&times;</span>
        </div>
        <div class="clear"></div>
    </div>
    <div class="header-right fr">
        <div class="login fl">
                    <span class="header-operater">
                    <a href="place.html">首页</a>
                    <a href="doing.html">订单列表</a>
                    <a href="#" class="hide">联系我们</a>
                    </span>
            <a id="header-login" class="navBtn f-radius f-select n" data-reveal-id="myModal" data-animation="fade">
                登录
            </a>
        </div>
        <div id="cart" class="cart fr">
            <img class="cart-icon" src="__PUBLIC__/view/img/icon_cart_22_22.png">
        </div>
        <div id="user" class="user fr n">
            <img class="user-icon" src="__PUBLIC__/view/img/icon_my.png">
        </div>
    </div>

    <ul id="subnav" class="subnav subnav-shadow n">
        <li><a href="/account/setting" target="">账号设置</a></li>
        <li><a href="/account/order" target="">我的订单</a></li>
        <li><a href="/account/balance" target="">我的余额</a></li>
        <li><a href="/account/score" target="">我的积分</a></li>
        <li><a href="/account/address" target="">我的地址</a></li>
        <li><a id="sub-logout" href="" target="">退出</a></li>
    </ul>
</div>



<div class="order-top-info" style="width: 100%">
    <span>首页&nbsp;&gt;&nbsp;<a class="info-place" onclick="JavaScript:history.go(-1);" style="color: red;">继续加菜</a></span>
    <!--<span>首页&nbsp;&gt;&nbsp;<a class="info-place" href="#">确认订单</a></span>-->
</div>

<div class="order-confirm-content" style="width: 100%">
    <div class="checkout-info  hide">
        <div class="checkout-title">
            <h2>订单信息</h2>
            <!--<a onclick="JavaScript:history.go(-1);">&lt; 返回菜单修改-->
            <a >&lt; 返回菜单修改
            </a>
        </div>
        <div class="checkout-tablehead">
            <div class="cell itemname">商品</div>
            <div class="cell itemquantity">份数</div>
            <div class="cell itemtotal">小计（元）</div>
        </div>
        <ul class="checkout-body">

        </ul>
        <div class="checkout-bottom">
                <span>实付：<a style="color:#f74342;">￥</a><a class="checkout-bottom-price">...</a>
                </span>
        </div>
    </div>

    <!--电脑版界面-->
    <!--<div id="pCheckout-content" class="checkout-content none center-horizontal" style="width: 100%">-->

        <div class="checkout-info none center-horizontal none_position">
            <div class="checkout-title">
                <h2>订单信息</h2>
                <a class="numberTable" href="#">第 x 桌
                </a>
            </div>

            <div class="checkout-tablehead">
                <div class="cell itemname">菜品</div>
                <div class="cell itemquantity">份数</div>
                <div class="cell itemtotal">小计（元）</div>
            </div>
            <ul class="checkout-body">
            </ul>
            <div class="checkout-bottom hide">
                <span>实付：<a style="color:#f74342;">￥</a><a class="checkout-bottom-price">333</a>
                </span>
            </div>
            <!--Vue.js-->
            <div id="app">
                <div class="btnChoice" style="margin-top:40px; display: none">
                    <div class="btn-group">
                        <button v-bind:class="choicePipple == 1 ? 'btn active' : 'btn'" v-on:click="choicePipple = 1">不要辣</button>
                        <button v-bind:class="choicePipple == 2 ? 'btn active' : 'btn'" v-on:click="choicePipple = 2">少量辣</button>
                        <button v-bind:class="choicePipple == 3 ? 'btn active' : 'btn'" v-on:click="choicePipple = 3">多点辣</button>
                    </div>
                    <span ></span>
                    <div class="btn-group">
                        <button v-bind:class="choice2 == true ? 'btn active' : 'btn'" v-on:click="choice2 = !choice2">不要香菜</button>
                        <button v-bind:class="choice3 == true ? 'btn active' : 'btn'" v-on:click="choice3 = !choice3">不要洋葱</button>
                    </div>
                    <div class="btn-group">
                        <button v-bind:class="choice4 == true ? 'btn active' : 'btn'" v-on:click="choice4 = !choice4">多点醋</button>
                        <button v-bind:class="choice5 == true ? 'btn active' : 'btn'" v-on:click="choice5 = !choice5">多点葱</button>
                    </div>
                </div>
                <div class="comment" >
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="请输入备注内容(可不填)" v-model="commentContent">
                        <span class="input-group-addon" v-on:click="showSubimtDialog">提交订单</span>
                    </div>
                </div>
            </div>

        </div>
        <div class="clear"></div>
</div>



<script src="__PUBLIC__/view/js/md5.js"></script>
<!--<script src="scripts/login.js"></script>-->
<script src="__PUBLIC__/view/js/cart.lib.js"></script>
<!--<script src="scripts/myInfo.js"></script>-->
<script src="__PUBLIC__/view/js/shopInfo.js"></script>
<script src="__PUBLIC__/view/js/order_my.js"></script>
<!--<script src="scripts/login.js"></script>-->
<script src="__PUBLIC__/view/js/header.js"></script>
<script src="__PUBLIC__/view/js/footer.js"></script>
<script type="text/javascript">
    $(function () {
        $(".footer-content").show();
    });
</script>

<script>
    console.log("shopId>>"+ $.cookie('shopId'));
</script>

<script>

    //就是$(window).resize()所调用的方法；
    var resizePage = function(){

        var zw=$(window).width();
        //设置左侧的高
        var zh=$(window).height();

        var leftHeight=zh-55;

        console.log("resize");

        if(zw>=1000){
            if(zw<1240){

            }else{

            }
//            $("#mCheckout-content").css("display", "none");
        }
        else if(zw<1000){

            if(zw<660){

            }else{

            }

//            $("#mCheckout-content").css("display", "block");
        }
    };

    $(function(){
        //监听窗口尺寸
        $(window).resize(resizePage);
    });

    resizePage();
</script>

<!-- 包括所有已编译的插件 -->
<script src="__PUBLIC__/view/js/bootstrap.min.js"></script>
<!--导入vue.js-->
<script src="__PUBLIC__/view/js/vue.js"></script>
<!--axios-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
</body>

<style>


</style>


<script>
    // 这是我们的Model
    var exampleData = {
        choicePipple:2,
        choice2:true,
        choice3:false,
        choice4:true,
        choice5:false,
        commentContent:""
    };

    var apiAddOrder = "{:U('Order/addOrder')}";
    var apiHomePage = "{:U('Menu/index')}";

    var that;
    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    new Vue({
        el: '#app',
        data: exampleData,
        mounted: function() {
            that = this;
            this.init();
        },
        methods: {
            init: function () {
                this.checkIfLogin();
                this.initShopInfo();
                this.initCart();
            },
            checkIfLogin: function () {
                var userId=$.cookie('userId');
                //if(!userId){
                //    location.href="/place.html";//跳到首页
                //}
            },
            //初始化商家信息
            initShopInfo: function () {
                var shopName=shop_GetValue("shopName");
                if(shopName){
                    $(".info-place").html(shopName);
                }
            },
            //初始化订单
            initCart: function () {
                var shopId=$.cookie('shopId');
                if(shopId){
                    var arrObj=this.queryAll(shopId);
                    //console.log("arrObj");
                    console.log(arrObj);
                    if (shopId) {
                        tableNum = $.cookie('table' + shopId);
                    }
                    $(".numberTable").html("第 "+tableNum+" 桌");
                    if(arrObj) {
                        var sumCount = 0;
                        var sumPrice = 0;
                        for (var i = 0; i < arrObj.length; i++) {
                            var itemId = arrObj[i].itemId;
                            var name = hexToString(arrObj[i].name);
                            var count = arrObj[i].count;
                            var price = arrObj[i].price;
                            var htmlTxt="<li class='checkout-tablerow'>"
                                +"<div class='cell itemname'>"+name+"</div>"
                                +"<div class='cell itemquantity'>"+count+"</div>"
                                +"<div class='cell itemtotal'>￥"+price+"</div></li>";
                            $('.checkout-body').append(htmlTxt);

                            sumCount += count;
                            sumPrice += price*count;//单价*个数
                        }
                        var bottomText="<li class='checkout-tablerow'>"
                            +"<div class='cell itemname'>"+"合计"+"</div>"
                            +"<div class='cell itemquantity'>"+sumCount+"</div>"
                            +"<div class='cell itemtotal'>￥"+sumPrice+"</div></li>";
                        $('.checkout-body').append(bottomText);

                        console.log("界面加载出来 了不是>>");
                    }
                } else  {
                    console.log("没有数据");
                    alert("当前没有下单");
                }
            },
            queryAll: function (shopId) {
                var arrTxt=$.cookie('cart'+shopId);
                if(arrTxt){
                    return eval('('+arrTxt+')');
                }else{
                    return;
                }
            },
            showSubimtDialog: function (event) {
//                alert("确认订单！！"+window.exampleData.commentContent);
                this.submitNow();
                dialog.confirmWithFuntion("确认订单？", "", function () {
                    return true;
                }, function () {
                    that.submitOrder();
                }, function () {});
            },
            submitNow: function () {
                var reqParams = {};
//
//                axios.post('/user',         //TODO:
//                    reqParams)
//                    .then(function (response) {
//                        console.log(response.toString());
//                    })
//                    .catch(function (error) {
//                        console.log(error.toString());
//                    });
            },
            submitOrder: function () {
                console.log("提交订单");
                var tableNum;                               //选中的值
                var shopId = $.cookie('shopId');
                if (shopId) {
                    tableNum = $.cookie('table' + shopId);
                }
                if (!tableNum) {                                //TODO:有几个桌子需要动态获取
                    //alert("下单失败：没有选择桌号");
                    //先清空购物车，再跳转回首页
                    clearCart();
                    location.href = "place.html";
                    return;
                }
                var arr = tableNum.split(',');
                //得到所有菜品
                //console.log("提交前检查shopId>>"+shopId);
                if (shopId) {
                    var arrObj = selectAll(shopId);
                    if (arrObj) {
                        var rs = new Object();
                        var dishs = new Array();
                        for (var i = 0; i < arrObj.length; i++) {
                            var dish = {};
                            var itemId = arrObj[i].itemId;
                            var name = hexToString(arrObj[i].name);
                            var count = arrObj[i].count;
                            var price = arrObj[i].price;
                            var price2 = price * count;//单价*个数
                            dish.itemId = itemId;
                            dish.name = name;
                            dish.count = count;
                            dish.price = price;

                            dishs.push(dish);
                        }//for
                        rs.tableNum = arr;
                        rs.dishs = dishs;

                        //console.log(JSON.stringify(rs));
                        that.submit(rs);
                    }//if
                } else {
                    alert("没有shopId，请稍后再试");
                }
            },
            submit: function (reqJson) {
                var index = layer.load();
                $.ajax({
                    type: "post",
                    url: apiAddOrder,
                    //url:"testData.json",
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("生成订单失败：请稍后再试");
                        layer.close(index);
                    },
                    data: reqJson,
                    dataType: "json",
                    success: function (data) {
                        if (!data.code) {
                            alert("生成订单失败：返回格式错误");
                            return;
                        }
                        switch (data.code) {
                            case 22001 :
                                that.onSuccessSubmit(data);
                                break;
                            default :
                                that.onFailureSumit(data);
                                break;
                        }
                        //
                        location.href = apiHomePage;          //跳到首页
                        that.clearCart();
                        layer.close(index);
                    }
                });
            },
            onSuccessSubmit: function (data) {
                console.log(data.toString());
                alert("订单生成成功!!");
            },
            onFailureSumit: function (data) {
                alert(data.message);
            },
            clearCart: function () {
                var shopId = $.cookie('shopId');
                if (shopId) {
                    //删除cookie中的菜单数据
                    //清空购物车
                    removeAllItem(shopId);
                } else {
                    alert("对不起没有商家号、无法清空购物车");
                    return;
                }
            }
        }
    })
</script>
</html>